<template>
	<view class="w-1 p-30">
		<view class="w-1 bg-ff br-20 m-b-30 relative" @click="$to('/pagemaster/pages/Order/Detail?sn='+item.ordersn)"
			v-for="(item,index) in list" :key="index">
			<view class="rlabel absolute rbg2" style="right: 0; top: 0;">待接单</view>
			<view class="w-1 p-30 fl-s-s" style="padding-bottom: 25rpx;">
				<view class="w-1 fr-b-c">
					<text class="c-33 fs-28 bold">{{item.title}}</text>
					<!-- <text class="c-price fs-28">{{obj[item.state]}}</text> -->
				</view>
				<text class="flex-1 c-77 m-t-10 fs-24  text-line-2">规格名称：{{item.skuons || '默认'}}</text>
				<view class="fr-s-c m-t-20">
					<text class=" c-77 fs-24">期望上门时间：</text>
					<text class=" c-33 bold fs-24">{{item.reservtime}}</text>
				</view>
				<view class="fr-s-c m-t-20">
					<text class=" c-77 fs-24">服务地址：</text>
					<text
						class=" c-33 bold fs-24">{{item.residevice+item.residecity+item.residedist+item.address}}</text>
				</view>
				<view class="m-t-30 w-1 bb-solid"></view>
				<view class="w-1 fr-b-c m-t-25 warp">
					<text class="fs-28" style="color: #7197FF;">距{{item.dis}}km</text>
					<view class="btn1 fr-c m-l-20" @click.stop="sureorder(item)">确认接单</view>
				</view>
			</view>
		</view>


		<view class="w-1 p-t-150" v-if="nodata">
			<up-empty :icon="$icon"></up-empty>
		</view>
	</view>
</template>

<script setup>
	// 0=待付款,1=已支付,2=已完成,3=取消支付,4=已发货,5=待评价,10=已接单,11=进行中,12=报价缴费中,13=完成待确认',
	const tabs = ref([{
			name: '全部',
			val: -1
		},
		{
			name: '已接单',
			val: 10
		},
		{
			name: '服务中',
			val: 11
		}, {
			name: '待客户确认',
			val: 13
		},
		{
			name: '已完成',
			val: 2
		}
	]);
	const activeStyle = {
		'font-weight': 800,
		'font-size': '32rpx',
		color: '#01796D'
	}
	const inactiveStyle = {
		'font-weight': 400,
		'font-size': '30rpx',
		color: '#333333'
	}


	const curtab = ref(0)

	function clickTab(e) {
		curtab.value = e.index;
		// reget(true)
	}

	const location = ref('')
	onLoad(async () => {
		const res = await getApp().getlocation(true)
		console.log(res)
		getlist()
		uni.$on('retab', () => reget(false))
	})
	onUnload(() => {
		uni.$off('retab')
	})

	const page = ref(1);
	const list = ref([])
	const nodata = ref(false);
	const loadmore = ref(true);

	function getlist() {
		uni.$get({
			url: '/api/Ordersystem/Takingorders',
			data: {
				type: 1,
				page: page.value,
			}
		}).then(res => {
			if (page.value == 1) list.value = [];
			list.value = [...list.value, ...res.data];
			nodata.value = !list.value.length;
			loadmore.value = res.data.length;
		}).catch(err => {
			list.value = [];
			nodata.value = !list.value.length;
			loadmore.value = true;
		})
	}

	function reget(loading = false) {
		page.value = 1;
		getlist(loading)
	}
	onPullDownRefresh(() => {
		reget()
	})
	onReachBottom(() => {
		if (loadmore.value) {
			page.value++;
			getlist()
		}
	})


	function sureorder(item) {
		uni.$post({
			url: '/api/Ordersystem/tocourieronorder',
			data: {
				aid: item.id,
				type: 1,
			}
		}).then(res => {
			uni.$emit('retab')
			uni.reLaunch({
				url: "/pages/index/index"
			})
			getApp().tt('接单成功', 'success')
			// uni.$delayBack()
			reget(false)
		})
	}
</script>

<style>
	page {
		background: #f1f5f6;
	}

	.btn1 {
		min-width: 170rpx;
		padding: 0 15rpx;
		height: 60rpx;
		border-radius: 12rpx;
		text-align: center;
		color: #ffffff;
		background: #01796d;
		font-size: 28rpx;
	}

	.btn2 {
		min-width: 170rpx;
		padding: 0 15rpx;
		height: 60rpx;
		border-radius: 12rpx;
		text-align: center;
		color: #ffffff;
		background: #ff6251;
		font-size: 28rpx;
	}

	.btn3 {
		min-width: 170rpx;
		padding: 0 15rpx;
		text-align: center;
		color: #505050;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		border: 2rpx solid #E5E5E5;
		font-size: 28rpx;
	}

	.btn4 {
		font-size: 28rpx;
		min-width: 170rpx;
		padding: 0 15rpx;
		height: 64rpx;
		border-radius: 12rpx;
		text-align: center;
		color: #ffffff;
		background: #fe9203;
		font-weight: bold;
	}


	.rlabel {
		min-width: 96rpx;
		padding: 0 15rpx;
		height: 44rpx;
		border-radius: 0 20rpx 0 20rpx;
		line-height: 44rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: center;
	}

	.rbg1 {
		background: #319a42;
	}

	.rbg2 {
		background: #ffbb00;
	}

	.rbg3 {
		background: #ff5c55;
	}

	.rbg4 {
		background: #99d0c7;
	}

	.rbg5 {
		background: #cfcfcf;
	}
</style>